<template>
	<div class="helpCenter">
		<div class="helpInfo">
			<p>Star River 帮助中心</p>
			<p>以下内容是为了让您更好了解 StarRiver 的参数配置以及使用说明是您更方便快捷地进行挖矿</p>
		</div>
		<p class="progressInfo">
			<span>购买Filecoin满存算力</span>
			<span class="arrow">➡</span>
			<span>签署协议</span>
			<span class="arrow">➡</span>
			<span>主网上线</span>
			<span class="arrow">➡</span>
			<span>查看收益</span>
		</p>
		<div class="moreQuestion">
			<p class="questionName">常见问题</p>
			<div class="questionLayout">
				<div>
					<p>
						<img src="../assets/icon.png" width="20px" height="20px" alt="">
						<span>挖矿介绍</span>
					</p>
					<p>
						<img src="../assets/icon.png" width="20px" height="20px" alt="">
						<span>星河鲸鱼账号注册</span>
					</p>
					<p>
						<img src="../assets/icon.png" width="20px" height="20px" alt="">
						<span>APP使用手册</span>
					</p>
				</div>
				<div>
					<p>
						<img src="../assets/icon.png" width="20px" height="20px" alt="">
						<span>挖矿流程</span>
					</p>
					<p>
						<img src="../assets/icon.png" width="20px" height="20px" alt="">
						<span>如何查看收益？</span>
					</p>
					<p>
						<img src="../assets/icon.png" width="20px" height="20px" alt="">
						<span>谷歌验证器下载使用说明</span>
					</p>
				</div>
			</div>

			<p class="questionName">更多疑问</p>
			<div>
				<a-form-model :model="form">
					<a-form-model-item>
						<a-input v-model="form.name" placeholder="请输入您的称呼" />
					</a-form-model-item>
					<a-form-model-item>
						<a-input v-model="form.phone" placeholder="请输入您的手机号码" />
					</a-form-model-item>
					<a-form-model-item>
						<div class="tags">
							<a-checkable-tag v-model="checkObj.checked1" @change="handleChange('1','checked1')">
								报单问题
							</a-checkable-tag>
							<a-checkable-tag v-model="checkObj.checked2" @change="handleChange('2','checked2')">
								提现问题
							</a-checkable-tag>
							<a-checkable-tag v-model="checkObj.checked3" @change="handleChange('3','checked3')">
								产品问题
							</a-checkable-tag>
							<a-checkable-tag v-model="checkObj.checked4" @change="handleChange('4','checked4')">
								个人信息
							</a-checkable-tag>
							<a-checkable-tag v-model="checkObj.checked5" @change="handleChange('5','checked5')">
								合同
							</a-checkable-tag>
							<a-checkable-tag v-model="checkObj.checked6" @change="handleChange('6','checked6')">
								领取收益
							</a-checkable-tag>
							<a-checkable-tag v-model="checkObj.checked7" @change="handleChange('7','checked7')">
								合作代理
							</a-checkable-tag>
						</div>
					</a-form-model-item>
					<a-form-model-item>
						<a-input v-model="form.message" type="textarea" placeholder="请输入您的留言" />
					</a-form-model-item>
					<a-form-model-item>
						<a-button class="submitBtn" @click="submitGd">提交</a-button>
					</a-form-model-item>
				</a-form-model>
			</div>
		</div>

		<div class="konwMore">
			<p>了解更多 Star River </p>
			<div class="iconLayout">
				<div @click="changeInfo('first')" :class="className == 'first' ? 'bgcDiv' : ''">
					<img src="../assets/helpIcon-1.png" width="100" height="100" alt="" v-if="className == 'first'">
					<img src="../assets/helpIcon1.png" width="100" height="100" alt="" v-if="className != 'first'">
				</div>
				<div @click="changeInfo('second')" :class="className == 'second' ? 'bgcDiv' : ''">
					<img src="../assets/helpIcon-2.png" width="100" height="100" alt="" v-if="className == 'second'">
					<img src="../assets/helpIcon2.png" width="100" height="100" alt="" v-if="className != 'second'">
				</div>
				<div @click="changeInfo('third')" :class="className == 'third' ? 'bgcDiv' : ''">
					<img src="../assets/helpIcon-3.png" width="100" height="100" alt="" v-if="className == 'third'">
					<img src="../assets/helpIcon3.png" width="100" height="100" alt="" v-if="className != 'third'">
				</div>
			</div>
		</div>

		<div class="detailInfo">
			<div v-if="className == 'first'">
				<p>
					星际文件系统IPFS（InterPlanetary File
					System）是一个面向全球的、点对点的分布式版本文件系统，目标是为了补充（甚至是取代）目前统治互联网的超文本传输协议（HTTP），将所有具有相同文件系统的计算设备连接在一起。原理用基于内容的地址替代基于域名的地址，也就是用户寻找的不是某个地址而是储存在某个地方的内容，不需要验证发送者的身份，而只需要验证内容的哈希，通过这样可以让网页的速度更快、更安全、更健壮、更持久。
				</p>
				<p>
					虽然说IPFS是文件系统，是一种用来存储数据的技术，但更确切的说IPFS是一种传输协议。类比HTTP，我们要在网上找到想要的内容，就要输入网址，网址多是HTTP开头，所以也必须经过它。HTTP通过域名、IP及多个中心服务器的中转，再进行文件的上传下载。HTTP的功绩无可取代，现在我们上网都要依赖于HTTP。但HTTP也存在一些问题，比如性能效率不是非常高，过度依赖于中心服务器与主干网络等等。
				</p>
				<p>
					IPFS与之相比，它是一种多中心化的解决方案，内容寻址不是通过域名、IP，而是通过唯一HASH密钥来进行数据寻找。IPFS是个分布式文件存储系统，文件数据并不储存在一个中心化的服务器中，而是存储在网络上所有符合条件的电脑上。
				</p>
			</div>
			<div v-if="className == 'second'">
				<p>
					Filecoin是由Protocol Labs（协议实验室）及其首席执行官Juan
					Benet发起的一个项目。Filecoin的协议建立在IPFS之上，IPFS是一种分布式存储系统，旨在连接每个持有整个系统文件部分的对等网络。Filecoin作为IPFS上的激励层，为人们提供存储支付而不是参与现有的自愿存储系统。
				</p>
				<p>
					2017年，Filecoin曾以2.57亿美元的募资金额创造了当时区块链行业融资最高记录。还有不少顶级风投机构参与了投资，包括Y Combinator、美国红杉资本、文克莱沃斯兄弟、Digital
					Currency Group、斯坦福大学、安德森·霍洛维茨基金、FundersClub、Union Square Ventures等等。
				</p>
				<p>
					这个区块链数据存储网络激励拥有存储空间人参与到一个网络中，在这个网络中他们提供存储服务，可以获得相应的回报。Filecoin 在分布式网络中将世界各地未使用的和过剩的存储进行货币化。Filecoin
					的运作与市场很相似。买家是寻找存储空间服务的人员，而卖家则是存储提供商。
				</p>
			</div>
			<div v-if="className == 'third'">
				<p>
					新加坡时间10月16日，Filecoin官方发布第一个备用 Filecoin 轻量版本Lotus, 译名莲花，Lotus版本会使 Filecoin
					主网更加安全和灵活，同时为了拥有可在同一网络上交互操作的多个软件实现，并大大降低安全风险。 官方的目标是要在2020年3月Filecoin 主网上线时推出具有2种以上可交互操作的协议的版本。
				</p>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		serviceTicketAdd
	} from '../serves/index'
	import {
		eventBus
	} from '@/eventBus';

	export default {
		name: "HelpCenter",
		data() {
			return {
				form: {
					name: '',
					phone: '',
					message: ''
				},
				checkObj: {
					checked1: false,
					checked2: false,
					checked3: false,
					checked4: false,
					checked5: false,
					checked6: false,
					checked7: false,
				},
				type: '',
				className: 'first'
			}
		},
		mounted() {},
		methods: {
			changeInfo(val) {
				this.className = val
			},
			handleChange(val1, val2) {
				this.type = val1
				for (let k in this.checkObj) {
					if (k != val2) {
						this.checkObj[k] = false
					}
				}
			},
			submitGd() {
				let params = {
					phone: this.form.phone,
					nickname: this.form.name,
					type: this.type,
					content: this.form.message
				}
				serviceTicketAdd(params).then(res => {
					if (res.status == 200 && res.data.status.code == 200) {
						this.$message.success('提交成功！')
					} else if (res.data.status.code == 450) {
						this.$message.warning(res.data.message)
						this.$router.push({
							path: '/login'
						})
						eventBus.$emit('isShow', false);
					} else {
						this.$message.warning(res.data.message)
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.helpCenter {
		background: #fff;
		color: #000;
		padding: 50px 200px;

		.helpInfo {
			p:nth-child(1) {
				text-align: center;
				font-size: 30px;
				font-weight: 700;
			}

			p:nth-child(2) {
				text-align: center;
				font-size: 14px;
				color: #4E586E;
			}
		}

		.progressInfo {
			margin-top: 50px;
			font-size: 16px;

			span:nth-child(odd) {
				font-weight: 700;
			}

			.arrow {
				margin: 0px 10px;
				color: #380CF4;
			}
		}

		.moreQuestion {
			padding: 50px 200px;
			box-shadow: 0px 5px 20px 0px rgba(56, 12, 244, 0.08);

			.tags {
				display: flex;
				background-color: rgba(56, 12, 244, 0.08);
				padding: 10px;
				border-radius: 5px;
			}


			.questionName {
				color: #380CF4;
				font-weight: 700;
				font-size: 18px;
				text-align: left;
			}

			.questionLayout {
				display: flex;
				justify-content: space-between;
				margin-bottom: 30px;

				p {
					text-align: left;
					margin-bottom: 30px;
				}

			}

			.ant-input {
				background-color: rgba(56, 12, 244, 0.08);
				border-color: rgba(56, 12, 244, 0.08);
			}

			.submitBtn {
				background: linear-gradient(to right, #C6B4FF 0%, #3404F4 100%);
				color: #fff;
				font-size: 16px;
				width: 200px;
				border-radius: 20px;
			}

		}

		.konwMore {
			box-shadow: 0px 5px 20px 0px rgba(56, 12, 244, 0.08);
			padding: 50px 200px;

			p:nth-child(1) {
				text-align: center;
				font-size: 30px;
				font-weight: 700;
			}

			.iconLayout {
				display: flex;
				justify-content: space-around;

				div {
					padding: 20px;
					cursor: pointer;
				}

				.bgcDiv {
					background-color: #380CF4;
				}
			}
		}

		.detailInfo {
			box-shadow: 0px 5px 20px 0px rgba(56, 12, 244, 0.08);
			padding: 50px 200px;
			text-align: left;
			color: rgba(78, 88, 110, 1);
		}
	}

	@media screen and (max-width: 800px) {
		.helpCenter {
			padding: 10px;

			.helpInfo {
				p:nth-child(1) {
					font-size: 24px;
				}

				p:nth-child(2) {
					text-align: center;
					font-size: 14px;
					color: #4E586E;
				}
			}

			.progressInfo {
				margin-top: 30px;
				font-size: 14px;
			}

			.moreQuestion {
				padding: 10px;

				.tags {
					display: inline-block;
					text-align: left;
					font-size: 12px;
					line-height: 0.1;
				}

			}

			.konwMore {
				display: none;
			}

			.detailInfo {
				display: none;
			}
		}
	}
</style>
